<template>
  <div style="height: 100%; overflow-y: auto;">
    <Menu theme="primary"
          style="height: 96%;width:100%"
          active-name="0"
          @on-select="change">
      <MenuItem name="0">
      全部接口
      <Icon type="md-add"
            style="float: right;font-size: 20px; color: red"
            @click="handleAdd" title="添加接口" />
      </MenuItem>
      <MenuItem :name="item.id"
                v-for="(item, index) in treeData"
                :key="index" >{{ item.name }}
      </MenuItem>
    </Menu>
  </div>
</template>

<script>
import { modules } from "@/utils/api";

export default {
  name: "tree",
  created () {
    this.handleGetModule();
  },
  data () {
    return {
      treeData: []
    }
  },
  watch: {
    selectProject(newVal, oldVal) {
      this.handleGetModule();
    }
  },
  computed: {
    selectProject: {
      get() {
        console.log('1111')
        return this.$store.state.selectProject;
      },
      set(value) {
        console.log('2222')
        this.$store.commit("updateSelectProject", value)
      }
    }
  },
  methods: {
    handleAdd () {
      this.$emit("addInterface")
    },
    handleGetModule () {
      const id = localStorage.getItem("project")
      modules(id).then(res => {
        this.treeData = res.data.data.list;
      })
    },
    change (e) {
      this.$emit("changeSelect", e)
    }
  }
}
</script>

<style scoped>
.tree_node {
  height: 40px;
  width: 100%;
  display: flex;
  font-size: 16px;
  align-items: center;
  justify-content: center;
}

.tree_icon {
  margin-left: auto;
  margin-right: 10px;
  color: deepskyblue;
}

.tree_icon {
  cursor: pointer;
}
</style>
